<template>
  <div class="info">
    <header>
      <el-form ref="form" :model="form" :rules="rules" class="audito">
        <el-form-item class="auditStatus" label="审核状态：" prop="auditStatus" lable-width="100px">
          <el-select v-model="form.auditStatus" placeholder="请选择教学楼">
            <el-option label="全部" value></el-option>
            <el-option label="待审核" value="0"></el-option>
            <el-option label="审核通过" value="1"></el-option>
            <el-option label="审核拒绝" value="2"></el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="申请日期：" prop="time">
          <el-date-picker
            :clearable="false"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
            v-model="form.time"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>-->
      </el-form>

      <el-button type="primary" plain class="btn" @click="search(form.auditStatus)">查询</el-button>
    </header>

    <el-table :data="tableData" style="width: 100%" v-if="tableData.length">
      <el-table-column label="教学楼编号" prop="buildId"></el-table-column>
      <el-table-column label="楼层" prop="storey"></el-table-column>

      <el-table-column label="教室编号" prop="roomId"></el-table-column>
      <el-table-column label="申请时间" prop="applyTime"></el-table-column>
      <el-table-column label="预约时间" prop="appointTime"></el-table-column>
      <el-table-column label="状态" prop="state" align="center">
        <template slot-scope="scope">{{scope.row.state|State}}</template>
      </el-table-column>

      <el-table-column label="操作" prop="operate" align="center">
        <template slot-scope="scope" v-if="scope.row.state==0">
          <el-button type="success" @click="operate(scope,'1')">通过</el-button>
          <el-button type="danger" @click="operate(scope,'2')">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-else class="kong">
      <img src="../assets/container-nodata-icon.svg" />
      <br />暂无数据，请新增
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      tableData: [],

      form: {
        auditStatus: "",

        state: "",
        time: "",
      },
      rules: {
        time: [
          { required: true, message: "必选项不能为空！", trigger: "blur" },
        ],
        auditStatus: [
          { required: true, message: "必选项不能为空！", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    // const date = new Date();
    // const current_date =
    //   date.getDate() > 10 ? date.getDate() : 0 + date.getDate();
    // // 获取本  日
    // const current_month =
    //   date.getMonth() + 1 > 10
    //     ? date.getMonth() + 1
    //     : "0" + (date.getMonth() + 1);
    // const current_year = date.getFullYear();
    // this.form.time = current_year + "-" + current_month + "-" + current_date;
    // this.getApplyInfo();
  },

  filters: {
    State(key) {
      switch (key) {
        case "0":
          return "待审核";
        case "1":
          return "审核通过";
        case "2":
          return "审核拒绝";
      }
    },
  },

  methods: {
    // getApplyInfo() {
    //   this.$axios({
    //     url: "/api/allApplyInforQ",
    //     method: "post",
    //     data: {
    //       queryType: "",
    //     },
    //   }).then((res) => {
    //     if (res._RejCode === "00000000") {
    //       this.tableData = res.applyInfors;
    //     }
    //   });
    // },

    operate(scope, state) {
      // this.$axios({
      //   url: "/api/updateApply",
      //   method: "post",
      //   data: {
      //     queryType: "",
      //   },
      // }).then((res) => {
      //   if (res._RejCode === "00000000") {
      //     this.tableData = res.applyInfors;
      //   }
      // });

      this.$confirm("是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$axios({
            url: "/api/updateApply",
            method: "post",
            data: {
              id: String(scope.row.id),
              state: String(state),
            },
          }).then((res) => {
            if (res._RejCode === "00000000") {
              this.search(this.form.state);
              this.$message({
                type: "success",
                message: "成功!",
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },

    // 查询
    search(queryType) {
      this.$axios({
        url: "/api/allApplyInforQ",
        method: "post",
        data: {
          queryType: queryType,
        },
      }).then((res) => {
        if (res._RejCode === "00000000") {
          this.tableData = res.applyInfors;

          this.form.state = this.form.auditStatus;
        }
      });
    },
  },
};
</script>
<style  scoped>
.info {
  width: 100%;
  margin: 0 auto;
}

header {
  width: 450px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-self: center;
  margin-bottom: 30px;
}

.auditStatus {
  display: flex;
  margin-bottom: 0px;
  margin-right: 30px;
}

.kong {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.kong > img {
  width: 500px;
}
</style>
